<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子居中的几种方法</title>
		<style type="text/css">
			.parent {
				width: 100px;
				height: 100px;
				border: 1px solid #d873ff;
				margin: 10px;
			}

			.child {
				width: 50px;
				height: 50px;
				background-color: #ffff00;
			}

			/* 利用子绝父相定位法 */
			#f1 {
				position: relative;
			}

			#s1 {
				position: absolute;
				margin: auto;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
			}

			/* 利用css3的新增属性 */
			#f2 {
				display: table-cell;
				vertical-align: middle;
			}

			#s2 {
				margin: auto;
			}

			/* 利用flex box布局 */
			#f3 {
				display: flex;
				/* 可写可不写 */
				/* flex-direction: column; */
				justify-content: center;
				align-items: center;
			}

			/* 利用transform的属性 */
			#f4 {
				position: relative;
			}

			#s4 {
				position: absolute;
				top: 50%;
				left: 50%;

				transform: translate(-50%, -50%);
				-ms-transform: translate(-50%, -50%);
				-moz-transform: translate(-50%, -50%);
				-o-transform: translate(-50%, -50%);
			}
		</style>
	</head>
	<body>
		<div class="parent" id="f1">
			<div class="child" id="s1"></div>
		</div>
		<div class="parent" id="f2">
			<div class="child" id="s2"></div>
		</div>
		<div class="parent" id="f3">
			<div class="child" id="s3"></div>
		</div>
		<div class="parent" id="f4">
			<div class="child" id="s4"></div>
		</div>
	</body>
</html>
